<!DOCTYPE html>
<html lang="en" style="height: 100%; width: 100%;">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../plugin/vue/vue.global.js"></script>
    <link rel="stylesheet" href="../css/main.css">
</head>

<body style="margin: 0px; height: 100%; width: 100%;">
    <div id="app">
        <div class="menu">
            <div class="menu-items">
                <img src="../icon/files.svg" alt="" srcset="" class="item" @click="NetdiskDisplay">
                <img src="../icon/movie.svg" alt="" srcset="" class="item" @click="MovieDisplay">
                <img src="../icon/music.svg" alt="" srcset="" class="item" @click="MusicDisplay">
                <img src="../icon/picture.svg" alt="" srcset="" class="item" @click="ImageDisplay">
                <img src="../icon/downloadandupload.svg" alt="" srcset="" class="item" @click="DownloadDisplay">
            </div>
        </div>
        <div class="main-content">
            <div class="window-controls">
                <div class="upsearch"></div>
                <div class="login-status">
                    <img src="../img/my.jpg" class="head" @click="OpenUserInfo_" alt="">
                    <div class="user-name" @click="OpenUserInfo_">{{uname_}}</div>
                </div>
                <div class="cloud-service">
                    <img src="../icon/cloud.svg" class="cloud-icon" @click="OpenAuthInfo_" alt="">
                    <div class="cloud-status" @click="OpenAuthInfo_">{{cloudStatus_}}</div>
                </div>
                <div class="win-ctrl">
                    <div class="minWindow" @click="minWin">
                        <img src="../icon/minWindow.svg" alt="" srcset="">
                    </div>
                    <div class="maxWindow" @click="maxWin">
                        <img src="../icon/maxWindow.svg" alt="" srcset="">
                    </div>
                    <div class="closeWindow" @click="closeWin">
                        <img src="../icon/close.svg" alt="" srcset="">
                    </div>
                </div>
            </div>
            <div v-if="currentDisplay_=='netdiskPage'" class="netdisk">
                <div v-if="(netdisk_current_display_ == 'netdisk-filelist')" class="netdisk-filelist">
                    <div class="operations">
                        <div class="left">
                            <img src="../icon/back.svg" alt="" srcset="" class="back" @click="GoBack">
                            <img src="../icon/forword.svg" alt="" srcset="" class="forword" @click="GoForward">
                            <img src="../icon/refresh.svg" alt="" srcset="" class="refresh" @click="Refresh">
                        </div>
                        <div class="path-docker"></div>
                        <input type="text" name="" id="" class="search" placeholder="搜索">
                    </div>
                    <div class="table-header">
                        <div class="select-all">
                            <input type="checkbox" name="" id="">
                        </div>
                        <div class="name">名称</div>
                        <div class="date">修改日期</div>
                        <div class="type">类型</div>
                        <div class="size">大小</div>
                    </div>
                    <div class="file-items">
                        <li class="item" 
                        v-for="(file, index) in file_list_"
                        :key="index"
                        :style="{backgroundColor: selectedFile_ == index ? '#cfddda' : ''}"
                        @contextmenu.prevent="showContextMenu($event, index)" 
                        @click="SelectFile_(index)"
                        @dblclick="OpenFileOrDir_(file.m_file_path, file.m_file_fid, file.m_file_isdir)">
                            <div class="icon">
                                <img :src="file.m_file_icon" alt="" srcset="">
                            </div>
                            <div class="file-name">
                                {{file.m_file_name}}</div>
                            <div class="modify-date">{{file.m_file_time}}</div>
                            <div class="file-type">{{file.m_file_type}}</div>
                            <div class="file-size">{{file.m_file_size}}</div>
                        </li>
                        <div v-if="menuVisible_" :style="{ top: `${menuY_}px`, left: `${menuX_}px` }" class="context-menu" id="context-menu">
                            <ul>
                                <li @click="OpenFileOrDir_">打开</li>
                                <li @click="CopyTo">复制至</li>
                                <li @click="MoveTo">剪切至</li>
                                <li @click="DeleteFile">删除</li>
                                <li @click="ReName">重命名</li>
                                <li @click="DownloadFile_">下载</li>
                                <li @click="DisplayAttribute">属性</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div v-if="(netdisk_current_display_ == 'netdisk-fileinfo')" class="netdisk-fileinfo">
                    <div class="fileinfo-top-bar">
                        <div class="fileinfo-top-bar-back">
                            <img src="../icon/back.svg" alt="">
                        </div>
                    </div>
                </div>
                <div v-if="(netdisk_current_display_ == 'netdisk-openimage')" class="netdisk-openimage">
                    图片显示
                </div>
                <div v-if="(netdisk_current_display_ == 'netdisk-openmovie')" class="netdisk-openmovie">
                    看视频
                </div>
                <div v-if="(netdisk_current_display_ == 'netdisk-openmusic')" class="netdisk-openmusic">
                    听音乐
                </div>
                <div v-if="(netdisk_current_display_ == 'netdisk-openpdf')" class="netdisk-openpdf">
                    查看pdf
                </div>
            </div>
            <div v-if="(currentDisplay_=='moviePage')">
                电影
            </div>
            <div v-if="(currentDisplay_=='musicPage')">
                音乐
            </div>
            <div v-if="(currentDisplay_=='imagePage')">
                图像
            </div>
            <div v-if="(currentDisplay_=='downloadPage')" class="download">
                <div class="operation"></div>
                <div class="header">
                    <div class="select-all">
                        <input type="checkbox" name="" id="">
                    </div>
                    <div class="name">名称</div>
                    <div class="size">大小</div>
                    <div class="status">状态</div>
                    <div class="process">进度</div>
                </div>
                <div class="downloading-files">
                    <li class="item" v-for="file in download_file_list_">
                        <div class="file-name">{{file.m_file_name}}</div>
                        <div class="file-size">{{file.m_file_size}}</div>
                        <div class="file-status">{{file.m_file_status}}</div>
                        <div class="file-process">{{file.m_file_process}}</div>
                    </li>
                </div>
            </div>
        </div>
        <div v-if="notification_visible_" :style="{backgroundColor: notification_background_}" class="notification">{{notification_message_}}</div>
    </div>
    <script src="../javascript/main.js"></script>
</body>

</html>